import React, { Suspense, ReactNode, DOMElement } from 'react';
import FnChildrenComponent from './FnChildrenComponent';
import { Spin, Button } from 'antd';
import { GridContent } from '@ant-design/pro-layout';
import { getList, getName } from './service';

interface ItemType {
  name: string,
  path: string,
  index?: number,
  id?: number,
}

interface ExamplesListState {
  list: Array<ItemType>
}

const PageLoading = ({ tip = '' }: { tip: ReactNode | string }) => (
  <div style={{ textAlign: 'center' }}>
    {tip}
    {/* <Spin size="large" tip={props.tip} /> */}
  </div>
)


const Examples = ({ list = [] }: ExamplesListState) => (
  <React.Fragment>
    {
      list.map((item: ItemType) => (
        <div key={item.id}>
          <div>{item.id}</div>
          <div>{item.name}</div>
          <div>{item.path}</div>
        </div>
      ))
    }
  </React.Fragment>
)

class ExamplesList extends React.Component<ExamplesListState> {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  state: ExamplesListState = {
    list: [],
  }

  componentDidMount() {
    this.handleClick()
  }

  myRef: {
    current: Element & { add?: () => void }
  }

  handleClick = () => {
    console.log(this.myRef);
    if (this.myRef.current.add) {
      this.myRef.current.add()
    }
    // getName().then(
    //   r => {
    //     console.log(r)
    //   },
    //   e => {
    //     console.log(e);
    //   }
    // );
    // getList().then(
    //   r => {
    //     this.setState({
    //       list: r,
    //     })
    //   },
    //   e => {
    //     console.log(e);
    //   }
    // );
  }

  render() {
    const { list } = this.state;
    return (
      <GridContent>
        <React.Fragment>
          <Button onClick={this.handleClick}>加载</Button>
          123123

          <FnChildrenComponent ref={this.myRef} />

          <Suspense fallback={<PageLoading tip="Loading " />}>
            <Examples list={list} />
          </Suspense>
        </React.Fragment>

      </GridContent>
    )
  }
}

export default ExamplesList;